<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>确定订单</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/order.css">
<script type="text/javascript" src="js/jquery1.7.2.js"></script>
<script type="text/javascript" src="js/superslide.js"></script><!-TAB->
</head>
<body>
<!-header start->
<nav class="topnav">
    <div class="row-w clearfix">
        <div class="topnav-l">
            <div class="topnav-tex fl">好的生活，没那么贵！</div>
            <div class="fl">
                <a class="c1" href="register.html">免费注册</a>
                <a class="c2" href="login.html">登录</a>
            </div>
        </div>
        <div class="topnav-r">
            <a href="#"><i class="icon-geren"></i>个人中心</a>|
            <a href="#"><i class="icon-kefu"></i>客服中心</a>|
            <a href="#">我的订单</a>|
            <a href="#">手机购物</a>
        </div>
    </div>
</nav>
<!-header end->
<!-conter start->
<div class="row-w">
    <div class="carthead clearfix">
        <div class="cart-logo">
            <a href="index.html"><img src="images/cart-order.png"></a>
        </div>
        <div class="stepWrap">
            <dl class="stepFirst step-finish">
                <dt class="num">1</dt>
                <dd class="text">购物车</dd>
            </dl>
            <dl class="step-finish">
                <dt class="num">2</dt>
                <dd class="text">确定订单</dd>
            </dl>
            <dl class="">
                <dt class="num">3</dt>
                <dd class="text">支付</dd>
            </dl>
            <dl class="stepLast">
                <dt class="num">4</dt>
                <dd class="text">完成</dd>
            </dl>
        </div>
    </div>
</div>
<div class="row-w">
    <div class="orderMain">
        <!--收货地址-->
        <div class="order-address">
            <h2 class="steptit">选择收货地址</h2>
            <div class="address-wrap">
                <div class="address-list">
                    <!--地址-->
                    <div class="address-ui part-more" id="addressUi">
                        <ul class="address-pad clearfix">
                            <li class="consignee">
                                <div class="address-panel">
                                    <div class="receiver">
                                        <strong>321&nbsp;&nbsp;收</strong>
                                        <a class="set-default" href="javascript:;">设为默认</a>
                                    </div>
                                    <div class="address-text">
                                        <p>南海家园六里35号楼2801</p>
                                        <p>北京 大兴区 亦庄经济开发区</p>
                                        <p>15131164405</p>
                                    </div>
                                    <div class="op-btns">
                                        <a class="mod" href="javascript:;">编辑</a>
                                        <a class="del" href="javascript:;">删除</a>
                                    </div>
                                </div>
                            </li>
                            <li class="consignee checked">
                                <div class="address-panel">
                                    <div class="receiver">
                                        <strong>321&nbsp;&nbsp;收</strong>
                                        <span class="default">默认地址</span>
                                    </div>
                                    <div class="address-text">
                                        <p>南海家园六里35号楼2801</p>
                                        <p>北京 大兴区 亦庄经济开发区</p>
                                        <p>15131164405</p>
                                    </div>
                                    <div class="op-btns">
                                        <a class="mod" href="javascript:;">编辑</a>
                                    </div>
                                </div>
                            </li>
                            <li class="consignee">
                                <div class="address-panel">
                                    <div class="receiver">
                                        <strong>321&nbsp;&nbsp;收</strong>
                                        <a class="set-default" href="javascript:;">设为默认</a>
                                    </div>
                                    <div class="address-text">
                                        <p>南海家园六里35号楼2801</p>
                                        <p>北京 大兴区 亦庄经济开发区</p>
                                        <p>15131164405</p>
                                    </div>
                                    <div class="op-btns">
                                        <a class="mod" href="javascript:;">编辑</a>
                                        <a class="del" href="javascript:;">删除</a>
                                    </div>
                                </div>
                            </li>
                            <li class="consignee">
                                <div class="address-panel">
                                    <div class="receiver">
                                        <strong>321&nbsp;&nbsp;收</strong>
                                        <a class="set-default" href="javascript:;">设为默认</a>
                                    </div>
                                    <div class="address-text">
                                        <p>南海家园六里35号楼2801</p>
                                        <p>北京 大兴区 亦庄经济开发区</p>
                                        <p>15131164405</p>
                                    </div>
                                    <div class="op-btns">
                                        <a class="mod" href="javascript:;">编辑</a>
                                        <a class="del" href="javascript:;">删除</a>
                                    </div>
                                </div>
                            </li>
                            <li class="consignee">
                                <div class="address-panel">
                                    <div class="receiver">
                                        <strong>321&nbsp;&nbsp;收</strong>
                                        <a class="set-default" href="javascript:;">设为默认</a>
                                    </div>
                                    <div class="address-text">
                                        <p>南海家园六里35号楼2801</p>
                                        <p>北京 大兴区 亦庄经济开发区</p>
                                        <p>15131164405</p>
                                    </div>
                                    <div class="op-btns">
                                        <a class="mod" href="javascript:;">编辑</a>
                                        <a class="del" href="javascript:;">删除</a>
                                    </div>
                                </div>
                            </li>
                            <li class="consignee">
                                <div class="address-panel">
                                    <div class="receiver">
                                        <strong>321&nbsp;&nbsp;收</strong>
                                        <a class="set-default" href="javascript:;">设为默认</a>
                                    </div>
                                    <div class="address-text">
                                        <p>南海家园六里35号楼2801</p>
                                        <p>北京 大兴区 亦庄经济开发区</p>
                                        <p>15131164405</p>
                                    </div>
                                    <div class="op-btns">
                                        <a class="mod" href="javascript:;">编辑</a>
                                        <a class="del" href="javascript:;">删除</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <span class="addrMore" id="addrMore">更多∨</span>
                    </div>
                    <!--添加新地址按钮-->
                    <div class="operateAddr">
                        <a class="newAddrBtn" id="newAddrBtn" href="javascript:;">+添加新地址</a>
                    </div>
                    <!--添加新地址-->
                    <div class="consignee-new" id="consigneeNew">
                        <div class="myaddress">
                            <div class="item clearfix">
                                <span class="label">所在地区：<em>*</em></span>
                                <div class="select-node clearfix">
                                    <select class="addr">
                                        <option value="1">北京市</option>
                                        <option value="2">天津市</option>
                                    </select>
                                    <span class="fl">市：</span>
                                    <select class="addr">
                                        <option value="1">北京市</option>
                                        <option value="2">天津市</option>
                                    </select>
                                    <span class="fl">区：</span>
                                    <select class="addr">
                                        <option value="1">朝阳区</option>
                                        <option value="2">大兴区</option>
                                    </select>
                                </div>
                            </div>
                            <div class="item clearfix">
                                <span class="label">详细地址：<em>*</em></span>
                                <div class="textarea-node clearfix">
                                    <textarea class="textarea-input" placeholder="请填写详细地址，最少5个字，最多不能超过100个字"></textarea>
                                </div>
                            </div>
                            <div class="item clearfix">
                                <span class="label">收货人姓名：<em>*</em></span>
                                <div class="text-node clearfix">
                                    <input class="text-input" type="text">
                                </div>
                            </div>
                            <div class="item clearfix">
                                <span class="label">手机：<em>*</em></span>
                                <div class="text-node clearfix">
                                    <input class="text-input" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="item-bottom">
                            <a class="item-submit" href="javascript:;">确定地址</a>
                            <a class="item-cancle" href="javascript:;">取消</a>
                        </div>
                    </div>
                    <script>
                        $(function(){
                            $("#newAddrBtn").click(function(){
                                $("#consigneeNew").show();
                            });

                            $('#addrMore').click(function(){
                                if ($(this).hasClass('on')) {
                                    $(this).removeClass('on').addClass('part-more').html('更多∨');
                                    $('#addressUi').removeClass('part-stop').addClass('part-more');
                                } else {
                                    $(this).addClass('on').removeClass('part-more').html('收起∧');
                                    $('#addressUi').addClass('part-stop').removeClass('part-more');
                                }
                            });
                            $('.consignee').click(function(){
                                    $(this).addClass('checked').siblings().removeClass('checked');
                            });
                        });
                    </script>
                    <!--<div class="much-address">-->
                        <!--<span><i>●</i>显示全部地址</span>-->
                        <!--<span><i>●</i>管理收货地址</span>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        <!--商品信息-->
        <div class="order-order">
            <h2 class="steptit">确定商品信息</h2>
            <div class="order-column">
                <div class="col list-con">商品</div>
                <div class="col list-info">商品信息</div>
                <div class="col list-price">单价(元)</div>
                <div class="col list-amount">数量</div>
                <div class="col list-freight">运费</div>
                <div class="col list-sum">小计(元)</div>
            </div>
            <div class="order-orderInfo">
                <!--订单店铺-->
                <div class="order-item">
                    <div class="shop-info">
                        <div class="shop-name">
                            <span class="s-h">店铺:</span>
                            <a class="t-h" href="javascript:;">华联购</a>
                        </div>
                    </div>
                    <div class="order-content">
                        <!--商品-->
                        <div class="order-lists">
                            <!--商品列-->
                            <div class="lists-item">
                                <div class="col list-con">
                                    <div class="list-img"><a href="javascript:;"><img src="images/goods-f-1.jpg" alt=""></a></div>
                                    <div class="list-text">
                                        <a href="javascript:;" title="秋冬季韩版宽松小清新薄荷绿甜美加厚加棉羊毛呢子大衣女毛呢外套">秋冬季韩版宽松小清新薄荷绿甜美加厚加棉羊毛呢子大衣女毛呢外套</a>
                                    </div>
                                </div>
                                <div class="col list-info">
                                    <p>颜色：薄荷绿</p>
                                    <p>尺寸：L</p>
                                </div>
                                <div class="col list-price">
                                    <p class="price">￥240.00</p>
                                </div>
                                <div class="col list-amount">
                                    <p class="amount">1</p>
                                </div>
                                <div class="col list-freight">
                                    <p class="freight-price">0</p>
                                </div>
                                <div class="col list-sum">
                                    <p class="sum-price">￥240.00</p>
                                </div>
                            </div>
                        </div>
                        <!--备注-->
                        <div class="order-memo">
                            <div class="memo-name">备注：</div>
                            <div class="memo-detail">
                                <textarea class="memo-input" placeholder="补充填写其他信息，如有快递不到也请留言备注"></textarea>
                            </div>
                        </div>
                        <!--合计-->
                        <div class="order-pay">
                            <span>合计：</span>
                            <span class="price">240.00</span>
                        </div>
                    </div>
                </div>
                <!--订单店铺-->
                <div class="order-item">
                    <div class="shop-info">
                        <div class="shop-name">
                            <span class="s-h">店铺:</span>
                            <a class="t-h" href="javascript:;">华联购</a>
                        </div>
                    </div>
                    <div class="order-content">
                        <!--商品-->
                        <div class="order-lists">
                            <!--商品列-->
                            <div class="lists-item">
                                <div class="col list-con">
                                    <div class="list-img"><a href="javascript:;"><img src="images/goods-f-1.jpg" alt=""></a></div>
                                    <div class="list-text">
                                        <a href="javascript:;" title="秋冬季韩版宽松小清新薄荷绿甜美加厚加棉羊毛呢子大衣女毛呢外套">秋冬季韩版宽松小清新薄荷绿甜美加厚加棉羊毛呢子大衣女毛呢外套</a>
                                    </div>
                                </div>
                                <div class="col list-info">
                                    <p>颜色：薄荷绿</p>
                                    <p>尺寸：L</p>
                                </div>
                                <div class="col list-price">
                                    <p class="price">￥240.00</p>
                                </div>
                                <div class="col list-amount">
                                    <p class="amount">1</p>
                                </div>
                                <div class="col list-freight">
                                    <p class="freight-price">0</p>
                                </div>
                                <div class="col list-sum">
                                    <p class="sum-price">￥240.00</p>
                                </div>
                            </div>
                            <!--商品列-->
                            <div class="lists-item">
                                <div class="col list-con">
                                    <div class="list-img"><a href="javascript:;"><img src="images/goods-f-1.jpg" alt=""></a></div>
                                    <div class="list-text">
                                        <a href="javascript:;" title="秋冬季韩版宽松小清新薄荷绿甜美加厚加棉羊毛呢子大衣女毛呢外套">秋冬季韩版宽松小清新薄荷绿甜美加厚加棉羊毛呢子大衣女毛呢外套</a>
                                    </div>
                                </div>
                                <div class="col list-info">
                                    <p>颜色：薄荷绿</p>
                                    <p>尺寸：L</p>
                                </div>
                                <div class="col list-price">
                                    <p class="price">￥240.00</p>
                                </div>
                                <div class="col list-amount">
                                    <p class="amount">1</p>
                                </div>
                                <div class="col list-freight">
                                    <p class="freight-price">0</p>
                                </div>
                                <div class="col list-sum">
                                    <p class="sum-price">￥240.00</p>
                                </div>
                            </div>
                        </div>
                        <!--备注-->
                        <div class="order-memo">
                            <div class="memo-name">备注：</div>
                            <div class="memo-detail">
                                <textarea class="memo-input" placeholder="补充填写其他信息，如有快递不到也请留言备注"></textarea>
                            </div>
                        </div>
                        <!--合计-->
                        <div class="order-pay">
                            <span>合计：</span>
                            <span class="price">240.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--商品信息-->
        <div class="order-payInfo">
            <div class="payInfo-return">
                <a class="returnBtn" href="#">返回购物车</a>
            </div>
            <div class="payInfo-wrap">
                <div class="piece">共有<strong class="piece-num">1</strong>件商品</div>
                <div class="realPay-price">总计: <strong class="price-sum">￥369.00元</strong></div>
                <div class="payBtn"><a class="go-btn" href="order-pay.html">确定并支付</a></div>
            </div>
        </div>
    </div>
</div>

<!-conter end->

</body>
</html>